import './App.css'
import { Menu } from './pages/Menu'
import { Preloader } from './pages/Preloader'
import { gameManager } from './core/GameManager'
import { unscheduleDelay } from './pages/Scheduler'
import { Canvas } from './pages/Canvas'
import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'

export const App = defineComponent({
  setup() {
    const loading = ref(true);
    onMounted(() => {
      gameManager.on("preloaded", () => loading.value = false);
      gameManager.on("restart", () => loading.value = true);
    })
    onBeforeUnmount(() => {
      gameManager.reset();
      unscheduleDelay();
    })

    return ()=> (
      <>
        <Canvas />
        {loading.value && <Preloader />}
        {!loading.value && <Menu />}
      </>
    )
  }
})
